<template>
  <view class="container mx-auto px-4 py-8">
    <h2 class="text-2xl font-bold mb-6">项目评分排行榜</h2>
    <view class="bg-white rounded-lg shadow-lg p-6 mb-6">
      <view class="flex flex-col md:flex-row gap-6">
        <view class="md:w-1/2">
          <h3 class="text-xl font-semibold mb-4">添加新项目</h3>
          <view class="space-y-4">
            <view>
              <label class="block text-sm font-medium text-gray-700 mb-1">项目名称</label>
              <input 
                v-model="newProject.name" 
                type="text" 
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="输入项目名称"
              >
            </view>
            <view>
              <label class="block text-sm font-medium text-gray-700 mb-1">评委评分 (用逗号分隔多个分数)</label>
              <input 
                v-model="newProject.judgeScores" 
                type="text" 
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="例如: 8,9,7.5"
              >
            </view>
            <view>
              <label class="block text-sm font-medium text-gray-700 mb-1">获得票数</label>
              <input 
                v-model.number="newProject.votes" 
                type="number" 
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="输入票数"
              >
            </view>
            <button 
              @click="addProject" 
              class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition duration-300"
            >
              添加项目
            </button>
          </view>
        </view>
        <view class="md:w-1/2">
          <h3 class="text-xl font-semibold mb-4">评分权重设置</h3>
          <view class="space-y-4">
            <view>
              <label class="block text-sm font-medium text-gray-700 mb-1">评委分权重 (默认0.6)</label>
              <input 
                v-model.number="judgeWeight" 
                type="number" 
                step="0.01" 
                min="0" 
                max="1"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
              <p class="text-xs text-gray-500 mt-1">票数权重将自动计算为: {{ voteWeight.toFixed(2) }}</p>
            </view>
            <view>
              <button 
                @click="resetProjects" 
                class="w-full bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-md transition duration-300"
              >
                重置所有项目
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bg-white rounded-lg shadow-lg overflow-hidden">
      <view class="overflow-x-auto">
        <table class="min-w-full">
          <thead>
            <tr class="bg-gray-50">
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">排名</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目名称</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">评委平均分</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">获得票数</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最终得分</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <template v-for="(project, index) in rankedProjects" :key="project.id">
              <tr class="hover:bg-gray-50 transition duration-150">
                <td class="px-6 py-4 whitespace-nowrap">
                  <view class="flex items-center">
                    <view class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
                      <span class="font-semibold text-blue-600">{{ index + 1 }}</span>
                    </view>
                  </view>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <view class="font-medium text-gray-900">{{ project.name }}</view>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <view class="text-gray-900">{{ project.judgeAverage.toFixed(2) }}</view>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <view class="text-gray-900">{{ project.votes }}</view>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <view class="font-semibold text-emerald-600 text-lg">{{ project.finalScore.toFixed(2) }}</view>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  <button 
                    @click="removeProject(project.id)" 
                    class="text-red-500 hover:text-red-700 transition duration-200"
                  >
                    删除
                  </button>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </view>
      <view v-if="projects.length === 0" class="px-6 py-12 text-center">
        <view class="text-gray-400">
          <i class="fa fa-bar-chart text-6xl mb-4"></i>
          <p class="text-lg">暂无项目数据</p>
          <p class="text-gray-500 mt-2">请添加项目以生成排行榜</p>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'VotingResults',
  data() {
    return {
      projects: [],
      newProject: {
        name: '',
        judgeScores: '',
        votes: 0
      },
      judgeWeight: 0.6,
      nextId: 1
    }
  },
  computed: {
    voteWeight() {
      return 1 - this.judgeWeight;
    },
    rankedProjects() {
      return [...this.projects]
        .sort((a, b) => b.finalScore - a.finalScore)
        .map((project, index) => ({
          ...project,
          rank: index + 1
        }));
    }
  },
  methods: {
    addProject() {
      if (!this.newProject.name.trim()) {
        alert('请输入项目名称');
        return;
      }
      
      const scoresArray = this.parseScores(this.newProject.judgeScores);
      if (scoresArray.length === 0) {
        alert('请输入有效的评委分数');
        return;
      }
      
      if (this.newProject.votes < 0) {
        alert('票数不能为负数');
        return;
      }
      
      const judgeAverage = scoresArray.reduce((sum, score) => sum + score, 0) / scoresArray.length;
      const finalScore = (judgeAverage * 10 * this.judgeWeight) + (this.newProject.votes * this.voteWeight);
      
      this.projects.push({
        id: this.nextId++,
        name: this.newProject.name,
        judgeScores: scoresArray,
        judgeAverage,
        votes: this.newProject.votes,
        finalScore
      });
      
      this.resetForm();
    },
    parseScores(scoresString) {
      return scoresString
        .split(',')
        .map(score => parseFloat(score.trim()))
        .filter(score => !isNaN(score) && score >= 1 && score <= 10);
    },
    removeProject(id) {
      this.projects = this.projects.filter(project => project.id !== id);
    },
    resetProjects() {
      if (confirm('确定要删除所有项目吗？')) {
        this.projects = [];
        this.nextId = 1;
      }
    },
    resetForm() {
      this.newProject = {
        name: '',
        judgeScores: '',
        votes: 0
      };
    }
  }
}
</script>

<style scoped>
/* 这里可以添加自定义样式 */
</style>  